<template>
  <div class="form-box">
    <el-form ref="ruleForm" :rules="rules" :model="itemInfo" label-width="auto">
      <el-form-item prop="content">
        <tinyMceEditor
          :ref="`tinymce${itemInfo.id}`"
          :editorId="`tinymce${itemInfo.id}`"
          :editorContent="itemInfo.content"
          :textMax="textMax"
        ></tinyMceEditor>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import tinyMceEditor from '@common/tinyMceEditor'
export default {
  props: ['itemInfo'],
  components: { tinyMceEditor },
  data() {
    var validateContent = (rule, value, callback) => {
      if (!this.content) callback(new Error('文本内容不能为空'))
      else if (!this.flag)
        callback(new Error(`超过最大字数限制，最大字数为${this.textMax}`))
      else callback()
    }
    return {
      content: '',
      flag: '',
      textMax: 5000,
      rules: { content: [{ validator: validateContent }] }
    }
  },
  methods: {
    editorContent() {
      const { id } = this.itemInfo
      const { content, flag } = this.$refs[`tinymce${id}`].tinymceEditorContent('other')
      this.content = content
      this.flag = flag
    },
    /* 收集数据 */
    collectData() {
      let flag = false
      this.editorContent()
      this.$refs['ruleForm'].validate((valid) => {
        if (valid && this.content) {
          this.itemInfo.content = this.content
          flag = true
        }
      })
      return flag ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped></style>
